<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
	</head>
	<style type="text/css">
		*{margin: 0 0;padding: 0 0;background: rgb(255,251,240);height: 100%;}
		header span{font-size: 18px; color: black;}
		.mui-content{width: 100%;height: 100%; }
		.logoIcon{width: 100%;height: 20%; }
		.inputForm{width: 90%; height: 40%; border: 1px solid lightgray;margin: 1% auto;border-radius: 5% 5%;padding: 5% 1%;box-shadow: 1px 1px 1px -2px gray;background: rgb(255,251,240);}
		.mui-input-row{margin: 5% auto;}
		.validate{width: 60%;height: 15%;margin: 0 auto;}
		.btnGroup{width: 90%;height: 20%;margin: 1% auto;padding: 2% 2%;}
		.btnGroup a{width: 40%;height:30%;margin: 0 auto;}
		.btnGroup p{float: left;margin: 5% 24%;}
		.mui-content{background: rgb(255,251,240);}
	</style>
	<body>
		<header class="mui-bar mui-bar-nav">
			<span class="mui-pull-left mui-icon mui-icon-back" onclick="mui.back()"></span>
			<span class="mui-title">登录</span>
		</header>
		<div class="mui-content">
			<div class="logoIcon">
				
			</div>
			<div class="inputForm mui-input-group">
				<div class="mui-input-row">
					<label>用户名</label>
					<input type="text" class="mui-input-clear username" placeholder="请输入用户名" />
				</div>
				<div class="mui-input-row">
					<label>密码</label>
					<input type="password" class="mui-input-password userpwd" placeholder="请输入密码" />
				</div>
				<div class="mui-input-row">
					<label>验证码:</label>
					<input type="text" max="6" class="mui-input-clear" placeholder="请输入验证码" />
				</div>
				<div class="validate">
						<img src="../images/logo.png"/>
				</div>
			</div>
			<div class="btnGroup">
				<a class="mui-btn mui-btn-success clickLogin mui-pull-left">
					登录
				</a>
				<a class="mui-btn mui-btn-danger mui-pull-right">
					注册
				</a>
				<p>忘记密码?立即找回！！！</p>
			</div>
		</div>
	</body>
	<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/config.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		mui.init();
		
		
		//重新定义返回函数
		old_back = mui.back();
		mui.back = function(){
			plus.webview.hide(ws);
			plus.webview.show(wo,'zoom-fade-out');
			wo.evalJS('isToken()');
		}
		
		var loginBtn = document.getElementsByClassName('clickLogin')[0];
		mui.plusReady(function(){
			ws = plus.webview.currentWebview();
			wo = ws.opener();
			ws.show('fade-in'); 
			plus.nativeUI.closeWaiting();			
			
			loginBtn.addEventListener('tap',function(){
				var username = document.getElementsByClassName('username')[0].value;
				var pwd = document.getElementsByClassName('userpwd')[0].value;
				if(!username || username.trim()==""){
					mui.alert('用户名不能为空');return;
				}
				if(!pwd || pwd.trim()==""){
					mui.alert('密码不能为空');return;
				}
				plus.nativeUI.showWaiting('请请请~请稍等~');
				
				loginAjax(username,pwd);
			});
			
		});
		
		
		
		/**
		 * 登录接口ajax
		 */
		var loginAjax = function(username,pwd){
			
			var formData = {user_count:username,user_pwd:pwd};
			mui.ajax(ipconfig().ip+'UserLogin.valiLogin',{
				data:formData,
				dataType:'json',
				timeout:10000,
				type:'post',
				headers:{'Content-Type':'application/x-www-form-urlencoded'},
				success:function(data){
					if(data.data.code == 0){
						/**
						 *获取到token后将token存入本地存储
						 * plus.storge频繁读取数据会造成卡顿
						 * 如需要 可替换一部分为localstorge存储
						 */	
						plus.storage.setItem('jx_token',data.data.token);
						plus.nativeUI.closeWaiting();
						plus.webview.close(ws,'fade-out');
						wo.evalJS('isToken()');
					}else{
						mui.toast(data.data.msg);
						plus.nativeUI.closeWaiting();
					}
				},
				error:function(xhr,type,errorThrow){
					
				}
			});
		};
		
		/**
		 * dom操作函数
		 */
		var setDom = function(){
			
			
			
			
			
		}
		
		
		
		
	</script>
</html>
